<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>基本信息</span>
                <div style="float: right;">
                    <el-button size="small" @click="onClose">取 消</el-button>
                </div>
            </div>
            <table class="custom-table">
                <tr><td class="tr-title">项目名称</td><td>{{details.name}}</td><td class="tr-title">供应商数量</td><td>{{details.quoteNum}}</td></tr>
                <tr><td class="tr-title">开始时间</td><td>{{details.createTime | formatDates}}</td><td class="tr-title">结束时间</td><td>{{details.openTime | formatTimes}}</td></tr>
                <tr><td class="tr-title">收货人</td><td>{{details.receiverName}}</td><td class="tr-title">收货人电话</td><td>{{details.receiverPhone}}</td></tr>
                <tr><td class="tr-title">收货地址</td><td colspan="3">{{details.address}}</td></tr>
                <tr><td class="tr-title">采购原因</td><td colspan="3">{{details.reason}}</td></tr>
                <tr><td class="tr-title">附件</td><td colspan="3">
                    <el-button size="mini" type="danger" @click="fileDownload">下载</el-button>
                </td></tr>
            </table>
          </el-card>
          
          <!-- <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>附件</span>
                <div style="float: right;">
                    <el-button @click="changePdfPage(0)" type="primary" size="mini" :disabled="currentPage==1">上一页</el-button>
                    {{currentPage}} / {{pageCount}}
                    <el-button @click="changePdfPage(1)" type="primary" size="mini" :disabled="currentPage==pageCount">下一页</el-button>
                    <el-button type="primary" size="mini" @click.stop="clock(true)">顺时针旋转</el-button>
                    <el-button type="primary" size="mini" @click.stop="clock(false)">逆时针旋转</el-button>
                    <el-button size="mini" type="danger" @click="fileDownload">下载</el-button>
                </div>
            </div>
            <pdf :src="pdfUrl" :rotate="pageRotate" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler"></pdf>
          </el-card> -->

  <!--         <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>中标供应商报价明细</span>
            </div>
            <el-table :data="tableDataSupplier" style="width: 100%;" stripe>
                <el-table-column prop="name" label="供应商名称"  width="150">
                    <template slot-scope="scope">
                        <el-button type="text" @click="findSupplierDetails(scope.row)">{{scope.row.name}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="name1" label="联系人"></el-table-column>
                <el-table-column prop="name2" label="联系方式"></el-table-column>
                <el-table-column prop="name4" label="是否报价" width="180">
                    <template slot-scope="scope">
                        <template v-if="scope.row.name4===1">
                            <label>是</label>
                            （{{scope.row.price}}）
                            <el-button type="text" @click="fileDownload">报价单</el-button>
                        </template>
                        <template v-else>
                            否
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="name5" label="合同价"></el-table-column>
                <el-table-column prop="gsFlag" label="是否中标">
                    <template slot-scope="scope">
                        <template v-if="scope.row.gsFlag === '0'">
                          <el-tag type="warning">未中标</el-tag>
                        </template>
                        <template v-else-if="scope.row.gsFlag === '1'">
                          <el-tag type="success">已中标</el-tag>
                        </template>
                      </template>
                </el-table-column>
                <el-table-column prop="name7" label="报价型号"></el-table-column>
            </el-table>
          </el-card> -->

          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>采购劳务</span>
            </div>
            <el-table :data="tableDataMaterial" style="width: 100%;" stripe>
                <el-table-column prop="name" label="劳务名称"></el-table-column>
                <el-table-column prop="purchasedNum" label="采购数量"></el-table-column>
                <el-table-column prop="remarks" label="备注">
                    <template slot-scope="scope">
                        <el-popover
                        placement="top"
                        width="200"
                        trigger="click"
                        :content="scope.row.remarks">
                        <el-button type="text" slot="reference">{{scope.row.remarks | ellipsis}}</el-button>
                    </el-popover>
                    </template>
                </el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>操作日志</span>
            </div>
            <el-table :data="tableDataLog" style="width: 100%;" stripe>
                <el-table-column prop="createUserName" label="操作人"></el-table-column>
                <el-table-column prop="stepName" label="操作模块"></el-table-column>
                <el-table-column prop="createTime" label="操作时间" :formatter="formatDate"></el-table-column>
                <el-table-column prop="remarks" label="意见">
                    <template slot-scope="scope">
                        <el-popover
                        placement="top"
                        width="200"
                        trigger="click"
                        :content="scope.row.remarks">
                        <el-button type="text" slot="reference">{{scope.row.remarks | ellipsis}}</el-button>
                    </el-popover>
                    </template>
                </el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>中标供应商结算情况</span>
            </div>
            <table class="custom-table">
                <tr>
                    <td class="tr-title">中标供应商名称</td><td>{{details.winningSupplierName}}</td>
                    <td class="tr-title">中标价格</td><td>{{contractDetails.winPrice/100}}</td>
                    <td class="tr-title">已付款</td><td>{{contractDetails.payMoney/100}}</td>
                    <td class="tr-title">未付款</td><td>{{(contractDetails.winPrice-contractDetails.payMoney)/100}}</td>
                </tr>
            </table>
          </el-card>

          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>合同详情</span>
            </div>
            <table class="custom-table">
                <tr><td class="tr-title">合同价（元）</td><td>{{contractDetails.contractPrice/100}}</td><td class="tr-title">已付款（元）</td><td>{{contractDetails.payMoney/100}}</td></tr>
                <tr><td class="tr-title">中标价（元）</td><td>{{contractDetails.winPrice/100}}</td><td class="tr-title">采购价格（元）</td><td>{{contractDetails.purchasePrice/100}}</td></tr>
                <tr><td class="tr-title">签约时间</td><td>{{contractDetails.signTime | formatDates}}</td><td class="tr-title">付款方式</td><td>{{contractDetails.payName}}</td></tr>
                <tr><td class="tr-title">合同附件</td><td colspan="3"><el-button type="text" @click="dowm">下载</el-button></td></tr>
            </table>
          </el-card>

           <!--供应商基本信息-->
           <el-dialog :title="supplierDetails.title" append-to-body :visible.sync="supplierDetails.visible" :width="supplierDetails.width" :close-on-click-modal="false">
            <table class="custom-table">
                <tr>
                    <td class="tr-title">供应商名称</td><td>{{supplierDetails.row.name}}</td>
                    <td class="tr-title">联系人</td><td>{{supplierDetails.row.contactPerson}}</td>
                </tr>
                <tr>
                    <td class="tr-title">联系方式</td><td>{{supplierDetails.row.contactPhone}}</td>
                    <td class="tr-title">传真</td><td>{{supplierDetails.row.wechat}}</td>
                </tr>
                <tr>
                    <td class="tr-title">微信</td><td>{{supplierDetails.row.fax}}</td>
                    <td class="tr-title">邮箱</td><td>{{supplierDetails.row.email}}</td>
                </tr>
                <tr>
                    <td class="tr-title">注册资金</td><td>{{supplierDetails.row.registeredCapital}}</td>
                    <td class="tr-title">统一社会代码</td><td>{{supplierDetails.row.licenseNo}}</td>
                </tr>
                <tr>
                    <td class="tr-title">成立日期</td><td>{{supplierDetails.row.buildDate}}</td>
                    <td class="tr-title">所在地址</td><td>{{supplierDetails.row.addresss}}</td>
                </tr>
                <tr>
                    <td class="tr-title">经营地址</td><td>{{supplierDetails.row.businessAddresss}}</td>
                    <td class="tr-title">邮编</td><td>{{supplierDetails.row.postCode}}</td>
                </tr>
                <tr>
                    <td class="tr-title">网址</td><td>{{supplierDetails.row.siteUrl}}</td>
                    <td class="tr-title">所属经济行业</td><td>{{supplierDetails.row.trade}}</td>
                </tr>
                <tr>
                    <td class="tr-title">企业规模</td><td>{{supplierDetails.row.scale}}</td>
                    <td class="tr-title">状态</td><td>{{supplierDetails.row.statusFlag=='1'?'正常':'禁用'}}</td>
                </tr>
                <tr>
                    <td class="tr-title">公司介绍</td><td colspan="2">{{supplierDetails.row.introduction}}</td>
                </tr>
                <tr>
                    <td class="tr-title">经营范围</td><td colspan="2">{{supplierDetails.row.businessScope}}</td>
                </tr>
                <tr>
                    <td class="tr-title">公司资质</td><td colspan="2">{{supplierDetails.row.qualification}}</td>
                </tr>
            </table>
        </el-dialog>
  
    </div>
</template>

<script>
    /*
        :rotate="pageRotate"
      :page="currentPage" // 当前展示的PDF页码
      @num-pages="pageCount=$event" // PDF文件总页码
      @page-loaded="currentPage=$event" // 一开始加载的页面
      @loaded="loadPdfHandler"> // 加载事件
    */
import moment from 'moment'
import pdf from 'vue-pdf'
import { contractDetails,bidPurchaseDetails,purchaseApplyLog } from "@/api/contract_api"
import store from '@/store'
export default {
    props: ['row'],
    components:{
        pdf
    },
    data() {
        return {
            pdfUrl:'',
            currentPage: 1, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            pageRotate: 0,//旋转
            tableDataMaterial:[],
            tableDataSupplier:[],
            tableDataLog:[],
            details:{},//标详情
            contractDetails:{},//合同详情
            supplierDetails:{
                title:'供应商基本信息',
                width:"1200px",
                visible:false,
                row:{}
            },
        };
    },
    filters: {
        formatDates(value) {
            if (!value) {
                return ''
            }
            return moment(value).format("YYYY-MM-DD")
        },
        formatTimes(value) {
            if (!value) {
                return ''
            }
            return moment(value).format("YYYY-MM-DD HH:mm:ss")
        },
        ellipsis (value) {
                if (!value) return ''
                if (value.length > 12) {
                    return value.slice(0,12) + '...'
                }
                return value
            }
    },
    created(){
        this.getBidContractDetails();
        this.getPurchaseDetails();
        this.getBidLog();
    },
    methods: {
        formatDate(row, column) {
              const date = row[column.property]
              if (date == undefined) {
              return ''
              }
              return moment(date).format("YYYY-MM-DD")
        },
        formatTime(row, column) {
              const date = row[column.property]
              if (date == undefined) {
              return ''
              }
              return moment(date).format("YYYY-MM-DD HH:mm:ss")
        },
        //标日志
        async getBidLog(){
            this.tableDataLog = await store.dispatch('user/purchaseBidLog',{id:this.row.bidId});
        },
          //合同详情
        async getBidContractDetails(){
            const {code,data} = await contractDetails(this.row.id);
            if(code === 200){
                this.contractDetails = data;
            }
        },
        //标详情
        async getPurchaseDetails(){
            const {code,data} = await bidPurchaseDetails(this.row.bidId);
            if(code === 200){//标详情
                this.details = data;
                this.tableDataMaterial = data.purchaseGoodsDetail !== '' ? JSON.parse(data.purchaseGoodsDetail) : [];//物资列表
                this.getPdf();
            }
        },
        //合同附件下载
        dowm(){
            var pdfUrl = `${process.env.VUE_APP_FILE}${this.contractDetails.contractFile}`;
            window.open(pdfUrl);

        },
        // pdf加载时
        loadPdfHandler(e) {
            this.currentPage = 1 // 加载的时候先加载第一页
            this.pageRotate = 0
        },
        getPdf(){
            var pdfUrl = `${process.env.VUE_APP_FILE}${this.details.files}`
            this.pdfUrl = pdf.createLoadingTask(pdfUrl);
        },
        changePdfPage (val) {
            if (val === 0) {
                this.currentPage--
            }else{
                this.currentPage++
            }
        },
        clock(flag) {
            if(flag){
                this.pageRotate += 90
            }else{
                this.pageRotate -= 90
            }
        },
        //供应商基本信息
        findSupplierDetails(row){
            this.supplierDetails.row = row;
            this.supplierDetails.visible = true;
        },
        //预览
        fileDownload(row){
            var form = document.createElement('form');
            if(!row.quoteOrderFile){return;}
            form.action =  `${process.env.VUE_APP_FILE}${row.quoteOrderFile}`
            form.target = '_blank';
            form.method = 'get';
            document.body.appendChild(form);
            form.submit();
        },
        onClose() {
            this.$emit("on-cancel-click","details");
        }
    }
};
</script>
    <style>
        .labelimg img{
            width: 100%;
        }
    </style>
    